<script setup lang="ts">
import { useAppearanceSettingStore } from '@/store/modules/appearance-setting';

const props = defineProps<{
  value: string;
  size?: number;
}>();

const borderRadius = computed(() => useAppearanceSettingStore().borderRadius);

const iconName = computed(() => props.value.split('__')[0]);
const iconStyle = computed(() => props.value?.split('__')[1] ?? 'line');
const iconColor = computed(() => props.value?.split('__')[2]);
const size = computed(() => props.size ?? 16);

const computedStyle = computed(() => {
  return {
    width: `${size.value}px`,
    height: `${size.value}px`,
    backgroundColor: iconColor.value,
    borderRadius: borderRadius.value,
  };
});
</script>

<template>
  <div>
    <div v-if="iconStyle === 'line'">
      <NIcon :size="size" :color="iconColor">
        <component :is="iconName" />
      </NIcon>
    </div>
    <div v-else :style="computedStyle" class="text-white flex justify-center items-center p-1">
      <NIcon :size="size">
        <component :is="iconName" />
      </NIcon>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>
